<template>
  <div>
    <div class="startTime">{{ currenttime }}</div>
    <van-slider
      v-model="value"
      @change="onChange"
      class="note"
      active-color="#ee0a24"
    >
      <template #button>
        <div class="btn">
          <div class="red"></div>
        </div>
      </template>
    </van-slider>
    <div class="endTime">{{ suMtime }}</div>

    <van-row type="flex" justify="space-around">
      <van-col span="4">
        <!-- 循环 -->
        <i
          class="iconfont icon-danquxunhuan"
          @click="circulation"
          v-if="songLoop"
        ></i>
        <!-- 顺序 -->
        <i class="iconfont icon-shunxubofang" v-else @click="order"></i>
      </van-col>
      <van-col span="4">
        <i class="iconfont icon-shangyishou"></i>
      </van-col>
      <van-col span="4">
        <i
          class="iconfont icon-bofang1 play"
          @click="suspend"
          v-if="!switchover"
        ></i>
        <i class="iconfont icon-bofang play" @click="play" v-else></i>
      </van-col>
      <van-col span="4">
        <i class="iconfont icon-xiayishou"></i>
      </van-col>
      <van-col span="4">
        <i class="iconfont icon-gedan"></i>
      </van-col>
    </van-row>
    <audio
      autoplay
      ref="audio"
      :src="songs.url"
      :loop="songLoop"
      @durationchange="getTime"
      @ended="ended"
      preload
      @timeupdate="timeupdate"
    ></audio>
  </div>
</template>

<script>
import { getSongUrl } from '@/api/play'

export default {
  data () {
    return {
      switchover: true, // 默认暂停
      id: this.$route.params.id, // 歌曲id
      songs: {}, // 歌曲url
      songLoop: false, // 是否重复播放
      suMtime: null, // 总时长
      value: 0,
      currenttime: null // 当前播放的长度
    }
  },
  created () {
    this.getSongUrl()
  },
  mounted () {
    this.timeupdate()
  },
  methods: {
    // 暂停
    suspend () {
      // 点击暂停切换到播放
      this.$refs.audio.play()
      this.switchover = true
      // 传值给父级
      this.$emit('animation', this.switchover)
    },
    // 播放
    play () {
      // 点击播放切换暂停
      this.$refs.audio.pause()
      this.switchover = false
      this.$emit('play')
    },
    // 获取歌曲url
    async getSongUrl () {
      try {
        const { data } = await getSongUrl({ id: this.id })
        this.songs = data[0]
        console.log()
      } catch (error) {
        this.$toast('亲爱的,暂无版权')
        console.log(error)
      }
    },
    circulation () {
      // 点击循环跳转顺序播放
      this.songLoop = false
      this.$toast('顺序播放')
    },
    order () {
      // 点击顺序跳转循环
      this.songLoop = true
      this.$toast('循环播放')
    },
    // 获取总时长
    getTime () {
      var musicDom = this.$refs.audio
      var time = parseInt(musicDom.duration)
      this.suMtime = this.time(time)
      // this.value =
    },
    // 实时变化的时间
    timeupdate () {
      var musicDom = this.$refs.audio
      //  变化的时间
      var times = parseInt(musicDom.currentTime)
      this.currenttime = this.time(times)
      // console.log(this.currenttime)

      // this.$emit('currentTime', this.time(times))
      this.$parent.BigInt(this.time(times))
      // 总时长
      var time = parseInt(musicDom.duration)
      // 获取实时播放的时间进度的百分比
      this.value = (times / time) * 100
    },
    onChange (value) {
      this.$toast('当前值:' + value)
    },
    ended () {
      // 播放完
      this.$emit('play')
      this.switchover = false
      this.$parent.theLyrics()
    },

    // 计算时间
    time (time) {
      // 分钟
      var minute = time / 60
      var minutes = parseInt(minute)
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      // 秒
      var second = time % 60
      // 四舍五入
      var seconds = Math.round(second)
      if (seconds < 10) {
        seconds = '0' + seconds
      }

      return minutes + ' : ' + seconds
    }
  },

  watch: {}
}
</script>

<style scoped lang="less">
/deep/.note {
  width: 460px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  margin: 35px auto 0;
}
.startTime {
  position: absolute;
  bottom: 195px;
  left: 10px;
  color: rgba(255, 255, 255, 100);
  font-size: 30px;
}
.endTime {
  position: absolute;
  bottom: 195px;
  right: 10px;
  color: rgba(255, 255, 255, 100);
  font-size: 30px;
}

.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -21px;
  left: -10px;
  background: url('~@/assets/drawable-xxhdpi/ic_seekbar_thumb.png') no-repeat;
  background-size: cover;
}
.btn img {
  width: 100%;
  height: 100%;
}
.red {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  z-index: 1000;
}
.iconfont {
  font-size: 70px;
  color: #fff;
  margin-left: 20px;
  line-height: 120px;
}

.van-row {
  margin-top: 50px;
  text-align: center;
}
.play {
  font-size: 100px;
}
</style>
